<script setup lang="tsx">
	import {
		h,
		onMounted,
		reactive,
		ref,
		toRaw
	} from "vue";
	import ReCol from "@/components/ReCol";
	import type {
		PaginationProps
	} from "@pureadmin/table";
	const prop = defineProps({
		info: {
			default: () => {}
		}
	});

	const orderProductsColumns: TableColumnList = [{
			label: "物料编号",
			prop: "materialCode"
		},
		{
			label: "物料名称",
			prop: "materialName"
		},
		{
			label: "所属分类",
			prop: "categoryName"
		},
		{
			label: "计划数量",
			prop: "planNum"
		},
		{
			label: "实际数量",
			prop: "actualityNum"
		},
		{
			label: "单位",
			prop: "unitName",
			width: 100
		},
		{
			label: "批次号",
			prop: "batchNo"
		},
		{
			label: "生产日期",
			prop: "produceDate"
		},
	];
</script>

<template>
	<div v-if="prop.info">
		<el-row :gutter="30">
			<re-col :value="6" :xs="24" :sm="24">
				<div>出库单号：{{prop.info?.orderNo}}</div>
			</re-col>
			<re-col :value="4" :xs="24" :sm="24">
				<div>客户：{{prop.info?.customer.name}}</div>
			</re-col>
			<re-col :value="5" :xs="24" :sm="24">
				<div>单据类型：{{prop.info?.orderTypeName}}</div>
			</re-col>
			<re-col :value="5" :xs="24" :sm="24">
				<div>单据状态：{{'待执行'}}</div>
			</re-col>
			<re-col :value="4" :xs="24" :sm="24">
				<div>备注：{{prop.info?.remarks}}</div>
			</re-col>
		</el-row>
		<div style="margin-bottom: 10px;"></div>
		<pure-table ref="tableRef" align-whole="center" showOverflowTooltip  size="large" adaptive
			:adaptiveConfig="{ offsetBottom: 108 }" :data="prop.info?.orderProducts" :columns="orderProductsColumns"
			:paginationSmall="false" :header-cell-style="{
			background: 'var(--el-fill-color-light)',color: 'var(--el-text-color-primary)'}"
			style="height: auto;"
			>
		</pure-table>
		<p style="display: flex;align-items: center;justify-content: flex-end;margin-top: 20px;">
			当前出库单数据共： <el-tag>{{prop.info?.orderProducts.length}}</el-tag>&nbsp;&nbsp;条 </p>
	</div>
</template>
<style scoped></style>